import React, { Component, createContext } from "react";
let { Provider, Consumer } = createContext();
class Moxing1 extends Component {
  render() {
    return (
      <Consumer>
        {({ msg, dianji }) => {
          return (
            <div>
              <h3>模型1组件：{msg}</h3>
              <button
                onClick={() => {
                  dianji();
                }}
              >
                传输
              </button>
            </div>
          );
        }}
      </Consumer>
    );
  }
}
class Moxing0 extends Component {
  render() {
    return (
      <div>
        <h3>模型0组件</h3>
        <Moxing1></Moxing1>
      </div>
    );
  }
}

export default class App extends Component {
  state = {
    msg: "杨洋",
  };
  dianji = (zhi) => {
    this.setState({
      msg: "昊辰",
    });
  };
  render() {
    return (
      <div>
        <Provider
          value={{
            msg: this.state.msg,
            dianji: this.dianji,
          }}
        >
          <Moxing0></Moxing0>
        </Provider>
      </div>
    );
  }
}
